<!-- StudentList.vue -->
<template>
  <el-card class="student-list-card">
    <template #header>
      <div class="card-header">
        <span>学生列表</span>
      </div>
    </template>
    <el-table :data="students" style="width: 100%">
      <el-table-column prop="studentNumber" label="学号" width="120" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column prop="phone" label="联系电话" />
      <!-- <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </el-card>
</template>

<script setup>
defineProps({
  students: {
    type: Array,
    required: true
  }
})

const handleView = (student) => {
  console.log('View student:', student)
  // 实际应用中跳转到学生详情页
}

const handleEdit = (student) => {
  console.log('Edit student:', student)
  // 打开编辑对话框
}
</script>

<style scoped>
.student-list-card {
  margin-bottom: 20px;
}
</style>